<template>
	<view class='page-container'>
		<view class="song-option-container">
			<image class="song-option-item" src="/static/image/song/all_music.png" @click="jumpLibrary"></image>
			<image class="song-option-item" src="/static/image/song/creation.png" @click='jumpCreation'></image>
		</view>
		<scroll-view class="song-tab-container" scroll-x="true">
			<view class='song-tab-item' v-for="(item,index) in musicType.list" :key='`scroll-${item.id}`' :id='item.id'
				:class='index===musicType.currentTab?"song-tab-item-current":""' @click='switchTab'>
				{{item.name}}
			</view>
		</scroll-view>
		<view class="song-list-container">
			<view class="song-list-item" v-for="(item,index) in songData.list" :key='item.id'>
				<view class="song-list-item-base-info">
					<text class="song-list-item-name">{{item.name}}</text>
					<text class="song-list-item-singer">{{item.singer}}</text>
				</view>
				<view class="song-list-item-option">
					<image src="/static/image/song/collect.png" class="song-list-item-option-icon"></image>
					<image src="/static/image/song/play.png" class="song-list-item-option-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { onLoad, onShow, onNavigationBarSearchInputClicked } from '@dcloudio/uni-app';
	import { apiGetMusicTypeList, apiGetMusicLists } from '@/api/song';
	import usePagination from "@/hooks/usePagination";

	const { dataList, isLoading, currentPage, initFetch, fetchNextPage,setExtraParams } = usePagination<any>(apiGetMusicLists, 10);

	let songData = reactive({
		list: []
	})

	let musicType = reactive({
		list: [],
		currentTab: 0,
	});

	const getMusicType = async () => {
		try {
			const response = await apiGetMusicTypeList();
			musicType.list = response;
			musicType.currentTab = 0;
		} catch (err) {
			console.error(err);
		}
	}
	
	onLoad(async() => {
		await getMusicType()
		setExtraParams({
			type_id:musicType.list[musicType.currentTab].id
		})
		initFetch()
	})


	const switchTab = (event : any) => {
		const index = musicType.list.findIndex((item) => {
			return item.id == event.currentTarget.id
		})
		musicType.currentTab = index;
		setExtraParams({
			type_id:musicType.list[musicType.currentTab].id
		})
		 initFetch()
	}

	const jumpLibrary = () => {
		uni.navigateTo({
			url: "/pages/song-library/index"
		})
	}

	const jumpCreation = () => {
		uni.navigateTo({
			url: "/pages/sheet-music-library/index"
		})
	}

	onNavigationBarSearchInputClicked(() => {
		uni.navigateTo({
			url: '/pages/search/index',
			animationType: "fade-in"
		})
	})
</script>

<style lang="scss" scoped>
	.page-container {
		.search-container {
			position: sticky;
			top: 0;
			width: 750rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.search-input {
				// margin: 0 40rpx;
				width: 670rpx;
				height: 56rpx;
				background: #353333;
				border-radius: 28rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 0 28rpx;

				>icon {
					margin-right: 20rpx;
				}

				>input {
					width: 600rpx;
				}
			}
		}

		.song-option-container {
			width: 690rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.song-option-item {
				width: 334rpx;
				height: 168rpx;
			}
		}

		.song-tab-container {
			position: sticky;
			z-index: 1;
			top: calc(88rpx + env(safe-area-inset-top));
			white-space: nowrap;
			width: 100%;
			background: $uni-bg-color;
			padding-bottom: 10rpx;

			.song-tab-item {
				display: inline-block;
				// box-sizing: border-box;
				width: 56rpx;
				padding: 0 32rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.song-tab-item-current {
				position: relative;

				&::before {
					content: "";
					position: absolute;
					width: 24rpx;
					height: 8rpx;
					background: #25DADA;
					border-radius: 4rpx;
					left: 48rpx;
					bottom: 0;
				}
			}

		}

		.song-list-container {

			.song-list-item {
				width: 646rpx;
				height: 40rpx;
				padding: 16rpx 48rpx 16rpx 56rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.song-list-item-base-info {
					max-width: 500rpx;
					display: flex;
					align-items: flex-end;

					.song-list-item-name {
						max-width: 350rpx;
						font-size: 28rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.song-list-item-singer {
						flex: 1;
						font-size: 24rpx;
						padding-left: 16rpx;
						color: #8A8A8A;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.song-list-item-option {
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.song-list-item-option-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>